<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="实训1.css">
</head>

<body>
    <!-- 页面由两部分组成 -->
    <!-- 内容区 -->
    <div class="container">
        <!-- 左侧栏 -->
        <aside>
            <div class="logo">
                <h1><a href="#">Corn Food</a></h1>
                <!--h1标签在这里主要用于增加SEO用于收录关键字的权重-->
            </div>
            <nav>
                <ul class="navlist">
                    <li><a class="active" href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Customers</a></li>
                    <li><a href="#">Shop</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <audio src="audio_video/myAudio.ogg" autoplay controls></audio>
            </nav>
        </aside>
        <main>
            <!-- 动画 -->
            <section>
                <object data="audio_video/spring.swf" type="application/x-shockwave-flash" width="719px" height="428px">
                    <param name="movie" value="spring.swf">
                </object>
            </section>
            <!-- 文章 -->
            <section>
                <article>
                    <a href="#">
                        <h2>Type and scrambled it to make a type</h2>
                        <video src="audio_video/mov.ogg" controls width="163" height="112"></video>
                    </a>
                    <p class="small-post">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer
                    </p>
                    <p class="date">
                        <span>Jun 30, 2012</span><a href="#">{ Continue! }</a>
                    </p>
                </article>

                <article>
                    <a href="#">
                        <h2>Type and scrambled it to make a type</h2>
                        <video src="audio_video/mov.ogg" controls width="163" height="112"></video>
                    </a>
                    <p class="small-post">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer
                    </p>
                    <p class="date">
                        <span>Jun 30, 2012</span><a href="#">{ Continue! }</a>
                    </p>
                </article>

                <article>
                    <a href="#">
                        <h2>Type and scrambled it to make a type</h2>
                        <video src="audio_video/mov.ogg" controls width="163" height="112"></video>
                    </a>
                    <p class="small-post">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer
                    </p>
                    <p class="date">
                        <span>Jun 30, 2012</span><a href="#">{ Continue! }</a>
                    </p>
                </article>

                <article>
                    <a href="#">
                        <h2>Type and scrambled it to make a type</h2>
                        <video src="audio_video/mov.ogg" controls width="163" height="112"></video>
                    </a>
                    <p class="small-post">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer
                    </p>
                    <p class="date">
                        <span>Jun 30, 2012</span><a href="#">{ Continue! }</a>
                    </p>
                </article>

                <article>
                    <a href="#">
                        <h2>Type and scrambled it to make a type</h2>
                        <video src="audio_video/mov.ogg" controls width="163" height="112"></video>
                    </a>
                    <p class="small-post">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer
                    </p>
                    <p class="date">
                        <span>Jun 30, 2012</span><a href="#">{ Continue! }</a>
                    </p>
                </article>

                <article>
                    <a href="#">
                        <h2>Type and scrambled it to make a type</h2>
                        <video src="audio_video/mov.ogg" controls width="163" height="112"></video>
                    </a>
                    <p class="small-post">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer
                    </p>
                    <p class="date">
                        <span>Jun 30, 2012</span><a href="#">{ Continue! }</a>
                    </p>
                </article>

            </section>
            <div class="clear"></div>
            <!--用于清除浮动-->
            <!-- 关于 -->
            <section>
                <h2>About</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
                    and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                    leap into electronic typesetting,</p>
                <p class="read-more">
                    <a href="#">{ Read More! }</a>
                </p>
            </section>
        </main>
    </div>
    <!-- 页尾 -->
    <footer>
        <p>Copyright ©鑫鑫. All rights reserved. <a href="#">河南鑫鑫科技有限公司</a> , Validation <a href="#">HTML5</a>|<a
                href="">CSS3</a></p>
    </footer>
</body>

</html>